<template>
  <CommonLayout>
    <div class="top">
      <div class="header">
        <img alt="logo" class="logo" src="@/assets/logo.png" />
        <span class="title">{{systemName}}</span>
      </div>
    </div>
    <div class="login">
      <a-form :model="form" :rules="rules" @finish="onFinish">
        <a-form-item name="username">
          <a-input
            v-model:value="form.username"
            size="large"
            placeholder="请输入账号"
            autocomplete="off"
          >
            <template #prefix>
              <a-icon name="UserOutlined" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item name="password">
          <a-input
            v-model:value="form.password"
            size="large"
            placeholder="请输入密码"
            type="password"
            autocomplete="off"
          >
            <template #prefix>
              <a-icon name="LockOutlined" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button :loading="loading" :disabled="disabled" size="large" style="width: 100%;margin-top: 24px" type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </CommonLayout>
</template>

<script setup>
import CommonLayout from "@/layouts/CommonLayout.vue";
import { computed, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const router = useRouter()
const store = useStore()

const systemName = process.env.VUE_APP_NAME

const rules = {
  username: [{required:true, message:'请输入账户名', whitespace: true, trigger: ['change', 'blur']}],
  password: [{required:true, message:'请输入密码', whitespace: true, trigger: ['change', 'blur']}],
}
const form = reactive({
  username:'admin',
  password:'admin888'
})
const loading = ref(false)
const disabled = computed(()=>{
  return !(form.username && form.password)
})

const onFinish = (e) => {
  // 登录功能代码
  store.commit('user/login', e) // 这里的e是form信息，实际使用修改为userInfo信息
  loading.value = true
  setTimeout(() => {
    loading.value = false
    router.push(process.env.VUE_APP_HOME_FULL_PATH)
  }, 1000);
}

</script>

<style lang="less" scoped>
.top {
  text-align: center;
  .header {
    height: 44px;
    line-height: 44px;
    a {
      text-decoration: none;
    }
    .logo {
      height: 44px;
      vertical-align: top;
      margin-right: 16px;
    }
    .title {
      font-size: 33px;
      color: rgba(0,0,0,.85);
      font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
      font-weight: 600;
      position: relative;
      top: 2px;
    }
  }
  .desc {
    font-size: 14px;
    color: rgba(0,0,0,.45);
    margin-top: 12px;
    margin-bottom: 40px;
  }
}
.login{
  width: 368px;
  margin: 24px auto 0;
  @media screen and (max-width: 576px) {
    width: 95%;
  }
  @media screen and (max-width: 320px) {
    .captcha-button{
      font-size: 14px;
    }
  }
}
</style>